import React, { useState } from 'react'
import "../../assets/css/register.less"
import { Progress, Form, Input, Button, Popover } from 'antd';
import { logins } from "../../apis/Login"
export default function Login(props) {
    const [text, settext] = useState('未输入')
    const [num, setnum] = useState(0)
    const content = (
        <div>
            <p>密码强度:{text}</p>
            <div style={{ width: 170 }}>
                <Progress percent={num} size="small" showInfo={false} />
            </div>
        </div>
    );
    const changeinput = (e) => {
        if (e.target.value.length < 4) {
            settext("低")
            setnum(33)
        } else if (e.target.value.length < 7) {
            settext("中")
            setnum(66)
        } else {
            settext("高")
            setnum(100)
        }
        console.log(e.target.value.length < 4);
    }
    const onFinish = async (values) => {
        const res = await logins({
            username: values.username,
            password: values.password
        })
        if (res.status == 200) {
            localStorage.setItem('token', res.data.data.token)
            props.history.push('/home')
        }
        console.log(props);
        console.log(res);
    };

    const onFinishFailed = (errorInfo) => {
        console.log('账户或者密码不能为空');
    };
    return (
        <div className='congtent'>
            <div className='box2'>
                <div className='tital'>
                    <span>赤兔养车</span>
                </div>
                <div className='username'>
                    <Form
                        name="basic"
                        labelCol={{ span: 6}}
                        wrapperCol={{ span: 18 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                        labelAlign="left"
                    >
                        <Form.Item
                            label="账户"
                            name="username"
                            rules={[{ required: true, message: '账户不能为空' }]}
                        >
                            <Input className='int' />
                        </Form.Item>
                        <Popover placement="rightTop" content={content} trigger="click">
                            <Form.Item
                                label="密码"
                                name="password"
                                rules={[{ required: true, message: '密码不能为空' }]}
                            >
                                <Input.Password onInput={changeinput} />
                            </Form.Item>
                        </Popover>
                        <Form.Item
                            label="确认密码"
                            name="istruepassword"
                            rules={[{ required: true, message: '确认密码不能为空' }]}
                        >
                            <Input.Password />
                        </Form.Item>
                        <div className='btn'>
                            <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
                                <Button className='button' type="primary" htmlType="submit">
                                    提交
                                </Button>
                            </Form.Item>
                        </div>
                        <div className='bottom'>
                            <div className='bottom-01'></div>
                            <a href=''>注册账户</a>
                            <a href=''>商家注册</a>
                        </div>
                    </Form>
                </div>
            </div>
        </div>
    )
}
